/** 
 * created by zhangyanling.
 * 架构页面
*/
import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb, Icon, Input } from 'antd';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import '@/common/css/base.less'
import logo from '@/common/img/logo.png'
import SiderMenu from '@/utils/SiderMenu'
import NavMenu from '@/utils/NavMenu'
import { menuCollapsed, getMenuData } from './action'
import createHistory from 'history/createBrowserHistory'

const mapStateToProps = state => ({
	appState: state.app,
	user: state.auth.user
});

const mapDispatchToProps = dispatch => bindActionCreators({
	onMenuCollapsed: menuCollapsed,
	getMenuData: getMenuData
}, dispatch);

const { Header, Footer, Sider, Content } = Layout;
const Search = Input.Search;

const history = createHistory();

class App extends Component {
	constructor(props){
		super(props);
		this.state = {
			currentKey: '1',
			currentMenu: null
		}
	}
	componentDidMount = () => {
		//获取菜单数据
		this.props.getMenuData();
		this.hashChangeMenu();
		// console.log(this.props.auth)
	}

	componentWillUnmount = () => {
		this.setState = (state,callback)=>{
          return;
        };
	}
	//根据路由hash设置左侧菜单
	hashChangeMenu = () => {
		// 判断当前hash,顶部导航选中对应值
		let hash = history.location.hash;
		let str = hash.slice(6),num=str.indexOf('/');
		let _hash = str.slice(0,num);
		
		// console.log(_hash)
		if(_hash == 'dashboard'){
			console.log("dashboard")
			this.setState({ currentKey: '1'},()=>{
				this.changeMenuHandle(this.state.currentKey)
			})
		}
		if(_hash == 'personal'){
			this.setState({ currentKey: '2'},()=>{
				this.changeMenuHandle(this.state.currentKey)
			})
		}
		if(_hash == 'suggestion'){
			this.setState({ currentKey: '3'},()=>{
				this.changeMenuHandle(this.state.currentKey)
			})
		}
		if(_hash == 'manage'){
			this.setState({ currentKey: '4'},()=>{
				this.changeMenuHandle(this.state.currentKey)
			})
		}
	}
	//切换左侧菜单
	changeMenuHandle = (num) => {
		if(num != '1'){
			let _currentMenu = this.props.appState.leftMenu[num]
			this.props.onMenuCollapsed({collapsed: true})
			this.setState({
				currentMenu: _currentMenu,
				currentKey: num
			})
		}else{
			this.props.onMenuCollapsed({collapsed: false})
			this.setState({ currentKey: num})
		}
	}
	
	render() {

		return(
			<Layout id="wrapper">
				<Header className="header">
					<div className="logo">
						<img src={logo} alt="奉节发电厂"/><span>合理化建议管理系统</span>
					</div>
					{this.props.user && <div className="user"><span>计划营销部：{this.props.user.fullname}</span></div>}
					<NavMenu changeMenu={this.changeMenuHandle} menus={this.props.appState.menu} currentKey={this.state.currentKey}/>
				</Header>
			    <Layout>
					<Sider 
						style={{ display: this.props.appState.collapsed ? 'block' : 'none' ,borderRight:'1px solid #e9e9e9',background:'#fff'}}
					>
						<div className="search-bar">
							<Search placeholder="搜索" />
						</div>
						<SiderMenu currentMenu={this.state.currentMenu}/>
					</Sider>
					<Content className="content-parent">
						{this.props.children}
					</Content>
			    </Layout>
		    </Layout>
		);
	}
}

App.propTypes = {
	onMenuCollapsed: PropTypes.func.isRequired,
	getMenuData: PropTypes.func.isRequired,
	appState: PropTypes.object.isRequired,
	user: PropTypes.object
  };

export default connect(mapStateToProps, mapDispatchToProps)(App);